<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        li {
            border: 1px dashed black;
            margin: 5px;
            line-height: 20px;
            font-size: 16px;
            width: 100%;
        }
        li:hover{
            background-color: pink;
            transition: all 0.45s ease;
        }
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.7s ease;
        }

        /*v-move 和v-leave-active 一般都是配合一起写的*/
        .v-move{
            transition: all 1s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <label for="">
            id:
            <input type="text" v-model="id">
        </label>
        <label for="">
            name:
            <input type="text" v-model="name">
        </label>
        <input type="button" value="添加" @click="add">
    </div>
    <!--<ul>-->
    <!--如果要为v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性-->
    <!--在实现列表过渡的时候，如果需要过渡的元素是通过v-for渲染出来的，不能使用transition包裹，需要使用transition-group-->
    <!--给transition-group添加appear属性，实现页面刚显示出来时候的效果-->
    <!--给transition-group元素设置tag属性，指定transition-group渲染为指定的元素，不指定的话默认span元素-->
        <transition-group appear tag="ul">
            <li v-for="(item, index) in list" :key="item.id" @click="del(index)">
                {{item.id}} === {{item.name}}
            </li>
        </transition-group>
    <!--</ul>-->
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '大家好哈哈哈哈，你们好啊。',
            id: '',
            name: '',
            list: [
                {id: 1, name: 'wuwenyuan1'},
                {id: 2, name: 'wuwenyuan1'},
                {id: 3, name: 'wuwenyuan1'},
                {id: 4, name: 'wuwenyuan1'}
            ]
        },
        methods: {
            add() {
                this.list.push({id: this.id, name: this.name});
            },
            del(index){
                this.list.splice(index, 1);
            }
        }

    })
</script>
</html>